<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<!-- 上面的背景 -->
		<div class="topBg m-0-a">
			<img src="/src/assets/bg@2x.png" class="bg" alt="" />
			<!-- 搜索 -->
			<div class="sech">
				<div class="title">Leveraging others' knowledge.</div>
				<div class="inpBox f f-a-c">
					<input type="text" class="inp" v-model="search" placeholder="Search.." name="" id="" />
					<div @click="goSearch" class="scheBtn f f-a-c f-j-c hand"><img src="/src/assets/sche.png" class="scheImg" alt="" /></div>
				</div>
				<!-- 下面的推荐 面包屑 -->
				<div class="crumbs f f-a-c">
					<div class="botCru">Popular：</div>
					<div class="crumbsItem f f-a-c">
						<div v-for="(item, index) in port.setting" @click="fillOut(item)" :key="index" class="item hand">{{ item.value }}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Explore services -->
		<div class="services f f-a-c">
			<div class="left">
				<div class="leftTitle">How does Xpert work</div>
				<div class="leftProcedure f f-a-c">
					<div class="oneProcedure f f-a-c">
						<div class="numOne">1</div>
						<div class="numTitle f f-a-c">Search and select your expert</div>
					</div>
					<div class="oneProcedure f f-a-c">
						<div class="numOne">2</div>
						<div class="numTitle f f-a-c">Chat with expert or/and place an order</div>
					</div>
					<div class="oneProcedure f f-a-c">
						<div class="numOne">3</div>
						<div class="numTitle f f-a-c">Ask an expert and solve your problems</div>
					</div>
				</div>
			</div>
			<div class="right f f-d-c f-j-c f-a-c">
				<div class="rigTitle">Don’t know who to ask?</div>
				<button @click="goRequest" class="btn hand hover f f-a-c f-j-c">Send request <img src="/src/assets/right.png" class="rigImg" alt="" /></button>
			</div>
		</div>
		<div class="explore m-0-a">
			<div class="title">Explore services</div>
			<div class="exploreList f f-a-c f-w-w">
				<div v-for="(item, index) in port.classList" :key="index" @click="goIndustrys(item, index)" class="exploreItem f-s">
					<div v-if="index != port.classList.length - 1" class="hand f f-a-c">
						<img :src="item.icon ? item.icon : '/src/assets/2.png'" class="exploreIcon" alt="" />
						<div class="count">{{ item.label }}</div>
					</div>
					<div v-if="index == port.classList.length - 1" @click="goIndustry" class="hand f f-a-c">
						<div class="count">{{ item.label }}</div>
						<img src="/src/assets/6.png" class="exploreImg m-l-10" alt="" />
					</div>
				</div>
			</div>
		</div>
		<!-- Financial  Services  -->
		<div v-if="pageListShow" class="financial">
			<div class="financialBox">
				<div class="title">{{ port.pageList[0] ? port.pageList[0].industry : "" }}</div>
				<div class="f f-a-c">
					<Swiper style="width: 100%" :modules="modules" :space-between="-250" :slides-per-view="3" :freeMode="{ freeMode: true }">
						<SwiperSlide @click="goUserInfo(item)" v-for="(item, index) in port.pageList[0]?.sellerList" :key="index">
							<div class="financialItem hand f-s">
								<div class="topAvatr">
									<div class="topSckr f f-a-c">
										<img src="/src/assets/Star.png" class="Star" alt="" />
										<div class="strNum">{{ item.level }}/5</div>
									</div>
									<div class="avatr f f-a-c">
										<div class="leftAva"><img :src="item.avatar || ''" class="avater" alt="" /></div>
										<div class="address">
											<div class="name">{{ item.firstName }}{{ item.lastName }}</div>
											<div class="cof">{{ item.position }}</div>
											<div class="addre f f-a-c f-j-c"><img src="/src/assets/address.png" class="imgAva" alt="" />{{ item.areaName || "--" }}</div>
										</div>
									</div>
									<!-- 下方的 -->
									<div class="topice f f-a-c f-j-c">
										<div class="topTit">Topics:</div>
										<div v-for="(ite, ind) in item.topicNames" :key="ind" class="topiceBox">{{ ite }}</div>
									</div>
								</div>
								<!-- count -->
								<div class="count">{{ item.myDescribe }}</div>
								<div class="btn">
									<ButtonDiffuse :name="'From $' + item.lowPrice" />
								</div>
							</div>
						</SwiperSlide>
					</Swiper>
				</div>
			</div>
		</div>
		<!-- Software Engineer  -->
		<div v-if="pageListShow" class="financial">
			<div class="financialBox">
				<div class="title">{{ port.pageList[1] ? port.pageList[1].industry : "" }}</div>
				<div class="f f-a-c">
					<Swiper style="width: 100%" :modules="modules" :space-between="-250" :slides-per-view="3" :freeMode="{ freeMode: true }">
						<SwiperSlide v-for="(item, index) in port.pageList[1]?.sellerList" @click="goUserInfo(item)" :key="index">
							<div class="financialItem hand f-s">
								<div class="topAvatr">
									<div class="topSckr f f-a-c">
										<img src="/src/assets/Star.png" class="Star" alt="" />
										<div class="strNum">{{ item.level }}/5</div>
									</div>
									<div class="avatr f f-a-c">
										<div class="leftAva"><img :src="item.avatar || ''" class="avater" alt="" /></div>
										<div class="address">
											<div class="name">{{ item.firstName }}{{ item.lastName }}</div>
											<div class="cof">{{ item.position }}</div>
											<div class="addre f f-a-c f-j-c"><img src="/src/assets/address.png" class="imgAva" alt="" />{{ item.areaName }}</div>
										</div>
									</div>
									<!-- 下方的 -->
									<div class="topice f f-a-c f-j-c">
										<div class="topTit">Topics:</div>
										<div v-for="(ite, ind) in item.topicNames" :key="ind" class="topiceBox">{{ ite }}</div>
										<!-- <div class="topiceBox">Rental</div>
										<div class="topiceBox">Cooperate law</div> -->
									</div>
								</div>
								<!-- count -->
								<div class="count">{{ item.myDescribe }}</div>
								<div class="btn">
									<ButtonDiffuse :name="'From $' + item.lowPrice" />
								</div>
							</div>
						</SwiperSlide>
					</Swiper>
				</div>
			</div>
		</div>
		<!-- Marketing  -->
		<div v-if="pageListShow" class="financial">
			<div class="financialBox">
				<div class="title">{{ port.pageList[2] ? port.pageList[2].industry : "" }}</div>
				<div class="f f-a-c">
					<Swiper style="width: 100%" :modules="modules" :space-between="-250" :slides-per-view="3" :freeMode="{ freeMode: true }">
						<SwiperSlide v-for="(item, index) in port.pageList[2]?.sellerList" @click="goUserInfo(item)" :key="index">
							<div class="financialItem hand f-s">
								<div class="topAvatr">
									<div class="topSckr f f-a-c">
										<img src="/src/assets/Star.png" class="Star" alt="" />
										<div class="strNum">{{ item.level }}/5</div>
									</div>
									<div class="avatr f f-a-c">
										<div class="leftAva"><img :src="item.avatar || ''" class="avater" alt="" /></div>
										<div class="address">
											<div class="name">{{ item.firstName }}{{ item.lastName }}</div>
											<div class="cof">{{ item.position }}</div>
											<div class="addre f f-a-c f-j-c"><img src="/src/assets/address.png" class="imgAva" alt="" />{{ item.areaName }}</div>
										</div>
									</div>
									<!-- 下方的 -->
									<div class="topice f f-a-c f-j-c">
										<div class="topTit">Topics:</div>
										<div v-for="(ite, ind) in item.topicNames" :key="ind" class="topiceBox">{{ ite }}</div>
									</div>
								</div>
								<!-- count -->
								<div class="count">{{ item.myDescribe }}</div>
								<div class="btn">
									<ButtonDiffuse :name="'From $' + item.lowPrice" />
								</div>
							</div>
						</SwiperSlide>
					</Swiper>
				</div>
			</div>
		</div>
		<!-- Why Xpert  -->
		<div onClisk="{}" class="whyXpert m-0-a">
			<div class="topName">Why Xpert</div>
			<div class="listBox f f-a-c">
				<div class="leftList">
					<div v-for="(item, index) in port.whyList" :key="index" class="listItem f f-a-c">
						<div class="Serial">0{{ index + 1 }}.</div>
						<div class="rigCount">
							<div class="topCount">{{ item.mianTitle }}</div>
							<div class="botonCount">{{ item.subtitleTitle }}</div>
						</div>
					</div>
				</div>
				<div class="rightImg">
					<img src="/src/assets/bgCom.png" class="imgCom" alt="" />
				</div>
			</div>
		</div>
		<!-- User cases 聊天 -->
		<div v-if="userListShow" class="userCases">
			<div class="userCasesCount">User cases</div>
			<div class="bodyCount f f-a-c f-j-c">
				<div class="bodyCountBody m-0-a f f-a-c">
					<div class="leftBg"><img :src="obj?.image || ''" class="touImg" alt="" /></div>
					<div class="RigQie">
						<img src="/src/assets/Frame_3@2x.png" class="punctuationMark" alt="" />
						<div class="topCount">
							{{ obj?.text }}
						</div>
						<div class="Elena">{{ obj?.nickname }}</div>
						<div class="cpo">{{ obj?.position }} @{{ obj?.company }}</div>
						<div class="btn f f-a-c f-j-b">
							<div @click="leftBtn()" class="lefBtn hand">
								<img src="/src/assets/lefJian.png" class="imgLef" alt="" />
							</div>
							<div @click="rigtBtn()" class="rigBtn hand">
								<img src="/src/assets/rigJian.png" class="imgLef" alt="" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { refrestTokenXP } from "@/utils/setting.js";
	import { BuyUserinfo, SellUserinfo, UserHomePage, WhyXpert, UserCases } from "@/api/xpert.js";
	import { SettingList, ClassificationTree } from "@/api/commonality.js";
	import { FreeMode } from "swiper/modules";
	import { Swiper, SwiperSlide } from "swiper/vue";
	import "swiper/swiper-bundle.css";
	import { ElMessage } from "element-plus";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	//引入导航
	import { onMounted, ref, reactive } from "vue";
	// 使用
	// Import Swiper styles
	import "swiper/css";
	import "swiper/css/navigation";
	import "swiper/css/pagination";
	import "swiper/css/scrollbar";
	import "swiper/css/free-mode";

	let ind = localStorage.getItem("ind");
	let xpToken = localStorage.getItem("xpToken");
	if (ind >= 3 && xpToken) {
		localStorage.setItem("ind", 3);
	} else if (!xpToken) {
		localStorage.setItem("ind", 1);
	}
	let search = ref("");
	let statusTab = ref(1);
	let obj = ref({});
	let pageListShow = ref(false);
	let userListShow = ref(false);
	let userInd = ref(0);
	let numInd = localStorage.getItem("ind");
	let modules = [FreeMode];
	let exploreList = ref([
		{
			name: "Finance&investment",
			img: "/src/assets/1.png"
		},
		{
			name: "Business",
			img: "/src/assets/2.png"
		},
		{
			name: "Legal",
			img: "/src/assets/3.png"
		},
		{
			name: "Art & Design",
			img: "/src/assets/4.png"
		},
		{
			name: "Career Development",
			img: "/src/assets/5.png"
		},
		{
			name: "More",
			img: "/src/assets/6.png"
		}
	]);
	let port = reactive({
		setting: [],
		classList: [],
		pageList: [],
		whyList: [],
		userList: []
	});
	const fillOut = item => {
		search.value = item.value;
	};
	onMounted(() => {
		// 刷新token
		// await refrestTokenXP();
		// 获取基础配置
		// Promise.all([await pageList(), await userCases(), await whyXpert(), await settingList(), await classificationTree()]);
		pageList();
		// usercavs
		userCases();
		// why xpert
		whyXpert();
		settingList();
		// 获取分明树
		classificationTree();
		// 获取个人信息
		if (numInd == 2 || numInd == 3) {
			userinfou();
		}
		window.addEventListener("scroll", handleScroll);
		// 这个是xpert首页缓存
		localStorage.setItem("home", 1);
	});
	// 去request
	const goRequest = () => {
		let token = localStorage.getItem("xpToken");
		if (!token) {
			ElMessage.warning("Please login first");
			return;
		}
		if (ind == 2) {
			// 卖家
			router.push({
				path: "/Request"
			});
		} else if (ind == 3) {
			// 买家
			router.push({
				path: "/UseRequest"
			});
		}
	};
	// h获取 UserCases
	const userCases = async () => {
		let n = await UserCases();
		port.userList = n.data;
		obj.value = n.data[0] || {};
		if (obj.value) {
			userListShow.value = true;
		}
	};
	// 获取首页的why xpert
	const whyXpert = async () => {
		let n = await WhyXpert();
		port.whyList = n.data;
	};
	// 获取首页列表
	const pageList = async () => {
		let n = await UserHomePage();
		port.pageList = n.data;
		pageListShow.value = true;
	};
	// 获取分类树Explore services
	const classificationTree = async () => {
		let n = await ClassificationTree();
		port.classList = n.data;
		port.classList.push({
			label: "Move",
			img: "/src/assets/6.png"
		});
		console.log(port.classList, "5555");
	};
	// 获取基础配置列表
	const settingList = async () => {
		let n = await SettingList({ title: "xp_popular" });
		port.setting = n.data;
	};
	// 获取用户资料
	const userinfou = async () => {
		if (numInd == 3) {
			// 表示是xpert买家用户
			let n = await BuyUserinfo();
			if (n.code == 200) {
				localStorage.setItem("userInfo", JSON.stringify(n.data) || "");
			}
		} else if (numInd == 2) {
			// 表示是xpert卖家用户
			let n = await SellUserinfo();
			if (n.code == 200) {
				localStorage.setItem("userInfo", JSON.stringify(n.data) || "");
			}
		}
	};
	// 点击做右按钮
	const rigtBtn = item => {
		if (port.userList.length == userInd.value + 1) return;
		userInd.value++;
		obj.value = port.userList[userInd.value] || {};
	};
	// 点击做左按钮
	const leftBtn = item => {
		if (userInd.value == 0) return;
		userInd.value--;
		obj.value = port.userList[userInd.value] || {};
	};

	// 点击去个人主页
	const goUserInfo = item => {
		// router.push("/PersonalHome");
		router.push({
			path: "/PersonalHome",
			query: {
				userId: item.userId
			}
		});
	};
	// 点击去Industry
	const goIndustry = () => {
		router.push("/Industry");
	};
	// 点击去Industry
	const goIndustrys = (item, index) => {
		// console.log(item, "11111111111111111111");
		// return;
		router.push({
			path: "/Industry",
			query: {
				id: item.id,
				index: index
			}
		});
	};
	//  点击搜索
	const goSearch = () => {
		if (search.value.length == 0) {
			return ElMessage.warning("请输入搜索内容");
		}
		// router.push("/Search");
		router.push({
			path: "/Search",
			query: {
				name: search.value
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	@function pxfn($px) {
		@return calc($px / 1.5) * 1px;
	}
	.userCases {
		width: 100%;
		margin-top: pxfn(100);
		.bodyCount {
			width: 100%;
			height: pxfn(850);
			background: #f7f7f9;
			.bodyCountBody {
				width: 1280px;
				// background-color: #4acd2c;
				height: pxfn(640);
				.RigQie {
					width: 50%;
					height: 100%;
					// background-color: pink;
					position: relative;
					padding: pxfn(60) pxfn(100);
					.topCount {
						font-size: pxfn(32);
						font-family: Manrope, Manrope-800;
						font-weight: 800;
						text-align: LEFT;
						color: #02102e;
						margin-bottom: pxfn(40);
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 6;
					}
					.btn {
						position: absolute;
						height: pxfn(74);
						width: pxfn(160);
						bottom: pxfn(0);
						right: pxfn(100);

						.lefBtn {
							width: pxfn(74);
							height: pxfn(74);
							img {
								width: 100%;
								height: 100%;
							}
						}
						.rigBtn {
							width: pxfn(74);
							height: pxfn(74);
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
					.cpo {
						font-size: pxfn(21);
						font-family: Manrope, Manrope-400;
						font-weight: 400;
						text-align: LEFT;
						color: #02102e;
					}
					.Elena {
						font-size: pxfn(24);
						font-family: Manrope, Manrope-700;
						font-weight: 700;
						text-align: LEFT;
						color: #02102e;
						margin-bottom: pxfn(13);
					}
					.punctuationMark {
						position: absolute;
						width: pxfn(180);
						height: pxfn(120);
						top: 0;
						left: pxfn(80);
					}
				}

				.leftBg {
					width: 50%;
					height: pxfn(640);
					border-radius: pxfn(20);
					overflow: hidden;
					.touImg {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.userCasesCount {
			font-size: pxfn(44);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: CENTER;
			color: #02102e;
			margin-bottom: pxfn(50);
		}
	}
	.whyXpert {
		width: 1280px;
		margin-top: pxfn(40);
		.listBox {
			margin-top: pxfn(50);
			height: pxfn(640);
			.leftList {
				width: 50%;
				height: 100%;
				// background-color: #4acd2c;
				overflow: auto;
				.listItem {
					margin-bottom: pxfn(55);
					.rigCount {
						width: 85%;
						// background-color: #02102e;
						margin-left: pxfn(40);
						.topCount {
							font-size: pxfn(26);
							font-family: Manrope, Manrope-700;
							font-weight: 700;
							text-align: LEFT;
							color: #02102e;
							margin-bottom: pxfn(8);
						}
						.botonCount {
							font-size: pxfn(24);
							font-family: Manrope, Manrope-400;
							font-weight: 400;
							text-align: LEFT;
							color: #5b6477;
						}
					}
					.Serial {
						font-size: pxfn(30);
						font-family: Manrope, Manrope-700;
						font-weight: 700;
						text-align: LEFT;
						color: #02102e;
					}
				}
			}
			.rightImg {
				width: 50%;
				height: 100%;
				// background-color: #fc00f2;
				border-radius: pxfn(21);
				overflow: hidden;
				.imgCom {
					width: 100%;
					height: 100%;
				}
			}
		}
		.topName {
			font-size: 30px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: CENTER;
			color: #02102e;
		}
	}
	.leftList::-webkit-scrollbar {
		display: none;
	}
	.financial {
		width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: end;
		box-sizing: border-box;
		.title {
			font-size: 36px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #02102e;
			margin-top: 20px;
			margin-bottom: 32px;
		}
		.financialBox {
			width: 100%;
			height: 100%;
			overflow-x: scroll;
			box-sizing: border-box;
			margin-top: pxfn(53);
			.financialItem {
				width: pxfn(466);
				height: pxfn(590);
				// background-color: pink;
				flex-wrap: nowrap;
				box-sizing: border-box;
				// overflow: hidden;
				margin-right: pxfn(32);

				.topAvatr {
					width: 100%;
					height: pxfn(330);
					background-color: #f7f7f9;
					padding: pxfn(14) pxfn(16);
					border-radius: pxfn(21);
					box-sizing: border-box;
					.Star {
						width: pxfn(24);
						height: pxfn(21);
						margin-right: pxfn(8);
						box-sizing: border-box;
					}
					.strNum {
						font-size: pxfn(16);
						font-family: Manrope, Manrope-500;
						font-weight: 500;
						text-align: LEFT;
						color: #8590a1;
						box-sizing: border-box;
					}
				}
				.avatr {
					margin-top: pxfn(34);
					justify-content: space-evenly;
					box-sizing: border-box;
					.leftAva {
						width: pxfn(157);
						height: pxfn(157);
						border-radius: 50%;
						box-sizing: border-box;
						.avater {
							width: pxfn(157);
							height: pxfn(157);
							border-radius: 50%;
							overflow: hidden;
							box-sizing: border-box;
							object-fit: cover;
						}
					}
					.address {
						box-sizing: border-box;
						.name {
							font-size: pxfn(21);
							font-family: Manrope, Manrope-800;
							font-weight: 800;
							text-align: center;
							color: #02102e;
							box-sizing: border-box;
						}
						.cof {
							font-size: pxfn(21);
							font-family: Manrope, Manrope-500;
							font-weight: 500;
							text-align: center;
							box-sizing: border-box;
							color: #02102e;
							margin: pxfn(13) 0;
						}
						.addre {
							font-size: pxfn(21);
							font-family: Manrope, Manrope-500;
							font-weight: 500;
							text-align: center;
							color: #02102e;
							box-sizing: border-box;
							.imgAva {
								width: pxfn(16);
								height: pxfn(18.6);
								margin-right: pxfn(6.6);
								box-sizing: border-box;
							}
						}
					}
				}
				.topice {
					flex-wrap: wrap;
					height: 56px;
					overflow: hidden;
					box-sizing: border-box;
					margin-top: 10px;
					height: 50px;
					overflow: hidden;
					.topTit {
						margin-bottom: 5px;
						font-size: pxfn(21);
						font-family: Manrope, Manrope-400;
						font-weight: 400;
						text-align: LEFT;
						color: #02102e;
						margin-right: pxfn(5);
						box-sizing: border-box;
					}
					.topiceBox {
						margin-bottom: 5px;
						border: pxfn(1.8) solid #c1c5cb;
						box-sizing: border-box;
						border-radius: pxfn(10);
						padding: pxfn(5) pxfn(8);
						font-size: pxfn(18);
						font-family: Manrope, Manrope-400;
						font-weight: 400;
						text-decoration: underline;
						text-align: LEFT;
						color: #02102e;
						text-decoration: underline;
						margin-right: pxfn(5);
						&:last-child {
							margin-right: 0;
						}
					}
				}
				.count {
					height: 56px;
					box-sizing: border-box;
					margin: pxfn(35) 0;
					padding: 0 pxfn(20);
					font-size: pxfn(24);
					font-family: Manrope, Manrope-400;
					font-weight: 400;
					text-align: LEFT;
					color: #02102e;
					display: -webkit-box; /* 使用弹性盒子布局 */
					-webkit-box-orient: vertical; /* 垂直排列子元素 */
					overflow: hidden; /* 隐藏溢出的内容 */
					-webkit-line-clamp: 3; /* 显示的行数 */
					-webkit-box-orient: vertical; /* 垂直排列子元素 */
					text-overflow: ellipsis; /* 显示省略号 */
				}
				.btn {
					box-sizing: border-box;
					width: 120px;
					height: 40px;
				}
			}
		}
		.financialBox::-webkit-scrollbar {
			width: 10px !important;
			height: 13px;
		}
		/*滚动条滑块*/
		.financialBox::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px rgba(97, 94, 94, 0.2);
			background: #fc00f2;
		}
		/*滚动条轨道*/
		.financialBox::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
			border-radius: 10px;
			background: #fffdfd;
		}
	}
	.explore {
		width: 1280px;
		margin-top: pxfn(100);

		.title {
			font-size: pxfn(38);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #02102e;
			margin-bottom: 20px;
		}
		.exploreList {
			width: 100%;
			.exploreItem {
				padding: pxfn(28) pxfn(30);
				margin-top: 20px;
				background-color: #fff;
				border-radius: pxfn(21);
				box-shadow: pxfn(5.3) pxfn(5.3) pxfn(16) 0px rgba(2, 16, 46, 0.08);
				margin-right: pxfn(77);
				.exploreIcon {
					width: pxfn(40);
					height: pxfn(40);
				}
				.exploreImg {
					width: pxfn(10.5);
					height: pxfn(18);
				}
				.count {
					font-size: pxfn(24);
					font-family: Manrope, Manrope-500;
					font-weight: 500;
					text-align: LEFT;
					color: #02102e;
					margin-left: pxfn(16);
				}
			}
		}
	}
	.services {
		position: relative;
		width: 1280px;
		left: 50%;
		margin-top: -10%;
		transform: translateX(-50%);
		height: pxfn(248);
		border: pxfn(1.3) solid #eaebee;
		border-radius: pxfn(32);
		padding: pxfn(40);
		padding-right: 0;
		.right {
			margin-left: 120px;
			.rigTitle {
				font-size: pxfn(30.33);
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: CENTER;
				color: #02102e;
				padding-left: pxfn(10);
			}
			.btn {
				margin-top: pxfn(15);
				border: none;
				width: pxfn(278.6);
				height: pxfn(74.6);
				font-size: pxfn(24);
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				background: #4acd2c;
				border-radius: pxfn(16);
				box-shadow: 0px pxfn(10.6) pxfn(26.6) 0px rgba(2, 16, 46, 0.15);
				.rigImg {
					margin-left: pxfn(7);
					width: pxfn(28);
					height: pxfn(26.27);
				}
			}
		}
		.left {
			border-right: pxfn(1.3) solid #eaebee;

			.leftTitle {
				font-size: pxfn(37.33);
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: left;
				color: #02102e;
				margin-bottom: pxfn(22);
			}
		}
		.leftProcedure {
			.oneProcedure {
				margin-right: pxfn(40);
				.numOne {
					font-size: pxfn(53.33) !important;
					font-family: Manrope, Manrope-700;
					font-weight: 700;
					text-align: LEFT;
					color: #02102e !important;
					margin-right: pxfn(20);
				}
				.numTitle {
					width: pxfn(282);
					height: pxfn(74.6);
					line-height: 1.4;
					font-size: pxfn(24);
					font-family: Manrope, Manrope-500;
					font-weight: 500;
					text-align: LEFT;
					color: #02102e;
				}
			}
		}
	}
	.sech {
		position: absolute;
		top: 47%;
		transform: translateY(-50%);
		// left: 3%;
		.crumbs {
			margin-top: pxfn(40);
			.botCru {
				font-size: pxfn(21);
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-align: LEFT;
				color: #02102e;
			}
			.crumbsItem {
				.item {
					padding: pxfn(6) pxfn(16);
					border: pxfn(1.3) solid rgba(0, 0, 0, 0.1);
					border-radius: pxfn(10);
					font-size: pxfn(16);
					font-family: Manrope, Manrope-400;
					font-weight: 400;
					text-align: LEFT;
					color: #02102e;
					margin-right: pxfn(16);
				}
			}
		}
		.title {
			margin-bottom: pxfn(40);
			font-size: pxfn(48);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #02102e;
		}
		.inpBox {
			.inp {
				width: pxfn(814);
				height: pxfn(69);
				border-bottom-left-radius: pxfn(16);
				border-top-left-radius: pxfn(16);
				border: pxfn(1) solid #ecedf0;
				padding-left: pxfn(30);
				font-size: pxfn(21);
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-align: LEFT;
				color: #8590a1;
			}
			.inp::placeholder {
				font-size: pxfn(21);
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-align: LEFT;
				color: #8590a1;
			}
			.inp:focus-visible {
				outline: none;
			}
			.scheBtn {
				width: pxfn(112);
				height: pxfn(69);
				background: #02102e;
				border-bottom-right-radius: pxfn(16);
				border-top-right-radius: pxfn(16);
				.scheImg {
					width: pxfn(28);
					height: pxfn(28);
				}
			}
		}
	}
	.topBg {
		position: relative;
		width: 1280px;
		height: pxfn(820.67);
		.bg {
			height: 100%;
			width: 100%;
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
		}
	}
</style>
